<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>Base64</title>
  <style>
    body {
      text-align: center;
      color: #999;
    }

    a.copy {
      margin: 22px;
      border: 1px solid #6387ff;
      padding: 10px 14px;
      border-radius: 5px;
      color: #6387ff;
      display: none;
    }

    a,
    a:hover,
    a:visited {
      text-decoration: none;
    }

    span.img {
      min-width: 400px;
      min-height: 300px;
      max-height: 800px;
      display: inline-block;
      border: dashed 2px #6387ff;
      padding: 10px;
      border-radius: 25px;
    }

    span.img img {
      max-width: 100%;
      max-height: 800px;
    }
  </style>
</head>

<body>
  <div>
    <span class="img">拖拽文件到这里或者点击浏览文件生成base64</span>
  </div>
  <a href="javascript:;" class="copy">复制base64</a>
  <script>
    // 在拖动目标上触发事件 (源元素):
    // ondragstart - 用户开始拖动元素时触发
    // ondrag - 元素正在拖动时触发
    // ondragend - 用户完成元素拖动后触发

    // 释放目标时触发的事件:
    // ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
    // ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
    // ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
    // ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

    var $ = function function_name(selector) {
      return document.querySelector(selector)
    }

    $('.img').ondragenter = function (e) {
      this.style.backgroundColor = 'gray'
    }

    $('.img').ondragover = function (e) {
      e.preventDefault()
    }

    $('.img').ondragleave = function (e) {
      this.style.backgroundColor = ''
    }

    $('.img').ondrop = function (e) {
      e.preventDefault()
      var file = e.dataTransfer.files[0]
      loadFile(file)
    }

    $('.img').onclick = function () {
      var input = document.createElement('input')
      input.type = "file"
      input.accept = "image/gif, image/jpeg, image/png"
      input.onchange = function (e) {
        var file = this.files[0]
        loadFile(file)
      }
      input.click()
    }

    var str = ''

    function loadFile(file, fn) {
      if (file) {
        if (file.type.indexOf('image/') === 0) {
          var reader = new FileReader()
          reader.onload = function (e) {
            str = e.target.result
            $('.img').innerHTML = `<img src="${str}">`
            fn && fn(e.target.result)
          }
          reader.readAsDataURL(file)
          $('.copy').innerText = 'base64生成成功'
          $('.copy').style.display = 'inline-block'
        } else {
          str = ''
          $('.copy').style.display = 'none'
          $('.copy').html('非图片文件')
        }
      }
    }

    document.addEventListener('copy', function (e) {
      e.clipboardData.setData('text/plain', str)
      e.preventDefault()
      if (str) {
        $('.copy').html('复制成功')
      } else {
        $('.copy').html('复制失败')
      }
    });

    $('.copy').onclick = function () {
      document.execCommand("copy")
    }
  </script>
</body>

</html>